<template>
  <div id="home-scroll" class="app">
    <div class="head">
      <p class="head-content">你好！{{ userName }}，开始你一天的工作吧</p>
    </div>
    <el-row :gutter="5">
      <el-col :span="8">
        <div class="todo-box">
          <p>产权任务</p>
          <el-link type="primary" @click="toAllTask">查看全部</el-link>
        </div>
        <el-tabs id="home" v-model="activeName" type="border-card">
          <el-tab-pane label="待办" name="todo">
            <p
              @mouseenter="mouseEnter(index)"
              @mouseleave="mouseLeave"
              :class="{active:index==isActive}"
              class="task-line"
              v-for="(item, index) in tableData || []"
              :key="index"
              @click="handleTask(item)"
            >{{item.taskName}}</p>
          </el-tab-pane>
          <el-tab-pane label="已办" name="done">
            <p
              @mouseenter="mouseEnter(index)"
              @mouseleave="mouseLeave"
              :class="{active:index==isActive}"
              class="task-line"
              v-for="(item, index) in doneTableData || []"
              :key="index"
            >{{item.taskName}}</p>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="8">
        <div class="todo-box">
          <p>预警信息</p>
          <el-link type="primary">查看全部</el-link>
        </div>
        <el-tabs id="home" type="border-card">
          <el-tab-pane label="未读">
            <p
              @mouseenter="mouseEnterWarning(index)"
              @mouseleave="mouseLeaveWarning"
              :class="{active:index==isActiveWarning}"
              class="task-line"
              v-for="(item, index) in warningData || []"
              :key="index"
            >{{item.alertValue}}</p>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="8">
        <div class="todo-box">
          <p>通知信息</p>
          <el-link type="primary">查看全部</el-link>
        </div>
        <el-tabs id="home" type="border-card">
          <el-tab-pane label="未读">
            <p
              @mouseenter="mouseEnterNotice(index)"
              @mouseleave="mouseLeaveNotice"
              :class="{active:index==isActiveNotice}"
              class="task-line"
              v-for="(item, index) in noticeData || []"
              :key="index"
            >{{item.taskName}}</p>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <div class="chart-box">
      <p>产权任务平均处理时间</p>
      <ve-histogram :data="chartData" :colors="colorArr"></ve-histogram>
    </div>
    <div class="chart-box2">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="chart-box2-item">
            <p>未完成任务占比</p>
            <ve-pie :data="chartDataPie"></ve-pie>
          </div>
        </el-col>
        <el-col :span="12">
          <el-card class="chart-box2-card">
            <div slot="header">
              <span style="font-size: 16px">我方股权占比最高的十家股份公司</span>
            </div>
            <div v-for="item in companyList" :key="item.index" class="list">
              <p class="list-item">{{item.title}}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { todoTask, warningDataList } from '@/api/modules/home.js'
import { queryRegisterTypeOa, queryTaskFiles } from '@/api/modules/taskCenter.js'
export default {
  data() {
    return {
      activeName: 'todo',
      tableData: [],
      doneTableData: [],
      warningData: [],
      noticeData: [
        { taskName: '通知1', taskId: '1' },
        { taskName: '通知2', taskId: '2' },
        { taskName: '通知3', taskId: '3' },
        { taskName: '通知4', taskId: '4' },
        { taskName: '通知5', taskId: '5' },
        { taskName: '通知6', taskId: '6' },
        { taskName: '通知7', taskId: '7' },
        { taskName: '通知8', taskId: '8' },
      ],
      userName: '',
      chartData: {
        columns: ['二级公司', '产权任务平均处理时间'],
        rows: [
          { '二级公司': '蛇口', '产权任务平均处理时间': 1393 },
          { '二级公司': '金融', '产权任务平均处理时间': 3530 },
          { '二级公司': '港口', '产权任务平均处理时间': 2923 },
          { '二级公司': '铁路', '产权任务平均处理时间': 1723 },
          { '二级公司': '轮船', '产权任务平均处理时间': 3792 },
          { '二级公司': '航天', '产权任务平均处理时间': 593 },
          { '二级公司': '航天', '产权任务平均处理时间': 3593 },
          { '二级公司': '航天', '产权任务平均处理时间': 5593 },
          { '二级公司': '航天', '产权任务平均处理时间': 4593 },
          { '二级公司': '航天', '产权任务平均处理时间': 6593 },
          { '二级公司': '航天', '产权任务平均处理时间': 8093 },
          { '二级公司': '航天', '产权任务平均处理时间': 9093 },
          { '二级公司': '航天', '产权任务平均处理时间': 1093 },
          { '二级公司': '航天', '产权任务平均处理时间': 8093 },
          { '二级公司': '航天', '产权任务平均处理时间': 18093 },
          { '二级公司': '航天', '产权任务平均处理时间': 1093 },
          { '二级公司': '航天', '产权任务平均处理时间': 1093 },
          { '二级公司': '航天', '产权任务平均处理时间': 18093 },
          { '二级公司': '航天', '产权任务平均处理时间': 6093 },
          { '二级公司': '航天', '产权任务平均处理时间': 7093 },
          { '二级公司': '航天', '产权任务平均处理时间': 8093 },
          { '二级公司': '航天', '产权任务平均处理时间': 5093 },
          { '二级公司': '航天', '产权任务平均处理时间': 3093 },
          { '二级公司': '航天', '产权任务平均处理时间': 2093 },
          { '二级公司': '航天', '产权任务平均处理时间': 1093 },
          { '二级公司': '航天', '产权任务平均处理时间': 1093 },
          { '二级公司': '航天', '产权任务平均处理时间': 8093 },
          { '二级公司': '航天', '产权任务平均处理时间': 18093 },
          { '二级公司': '航天', '产权任务平均处理时间': 5093 },
          { '二级公司': '航天', '产权任务平均处理时间': 1000 },
          { '二级公司': '航天', '产权任务平均处理时间': 1203 },
          { '二级公司': '航天', '产权任务平均处理时间': 1393 },
        ]
      },
      chartDataPie: {
        columns: ['二级公司', '未完成任务占比'],
        rows: [
          { '二级公司': '蛇口', '未完成任务占比': 20 },
          { '二级公司': '金融', '未完成任务占比': 10 },
          { '二级公司': '港口', '未完成任务占比': 30 },
          { '二级公司': '铁路', '未完成任务占比': 5 },
          { '二级公司': '轮船', '未完成任务占比': 25 },
          { '二级公司': '航天', '未完成任务占比': 10 }
        ]
      },
      companyList: [
        { title: '招商局集团有限公司', index: '1' },
        { title: '招商局集团有限公司', index: '2' },
        { title: '招商局集团有限公司', index: '3' },
        { title: '招商局集团有限公司', index: '4' },
        { title: '招商局集团有限公司', index: '5' },
        { title: '招商局集团有限公司', index: '6' },
        { title: '招商局集团有限公司', index: '7' },
        { title: '招商局集团有限公司', index: '8' },
        { title: '招商局集团有限公司', index: '9' }
      ],
      colorArr: ['#79BBFF', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
      isActive: null,
      isActiveWarning: null,
      isActiveNotice: null
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      todoTask({ companyCode: this.$store.state.userMsg.empCompanyCode, status: '0' }).then(res => {
        this.tableData = res.data.data
      })
      todoTask({ companyCode: this.$store.state.userMsg.empCompanyCode, status: '1' }).then(res => {
        this.doneTableData = res.data.data
      })
      warningDataList({ companyCode: this.$store.state.userMsg.empCompanyCode }).then(res => {
        this.warningData = res.data.data
      })
      this.userName = this.$store.state.userMsg.empName
    },
    toAllTask() {
      this.$router.push('/propertyRegister')
    },
    handleTask(row) {
      const breadList = [{ title: '任务中心' }, { title: '产权登记任务中心' }]
      this.$store.commit('saveBread', breadList)
      const obj = {
        taskId: row.taskId
      }
      queryTaskFiles(obj).then(res =>{
        const arr = {
          url: {}
        }
        arr.url = res.data.data
        const data = {
          companyName: row.companyName,
          taskId: row.taskSubId
        }
        queryRegisterTypeOa(data).then(res => {
          if (res.data.body.flag === '1') {
            const query = Object.assign(row, res.data.body, arr)
            console.log(query)
            this.$router.push({ path: '/propertyRightAdd', query})
          } else if (res.data.body.flag === '0') {
            const query = Object.assign(row, res.data.body, arr)
            console.log(query)
            this.$router.push({ path: '/detail', query })
          }
        })
      })
    },
    // 鼠标移入
    mouseEnter(index) {
      this.isActive = index
    },
    // 鼠标移除
    mouseLeave() {
      this.isActive = null
    },
    mouseEnterWarning(index) {
      this.isActiveWarning = index
    },
    mouseLeaveWarning() {
      this.isActiveWarning = null
    },
    mouseEnterNotice(index) {
      this.isActiveNotice = index
    },
    mouseLeaveNotice() {
      this.isActiveNotice = null
    }
  }
}
</script>

<style lang="less" scoped>
  .app {
    padding: 0 10px 0 0;
    width: calc(100% - 10px);
    height: calc(100vh - 60px);
    overflow: auto;
    overflow-x: hidden;
    .head {
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      background-color: #ffffff;
      .head-content {
        font-size: 14px;
        padding: 0 30px;
        font-weight: 600;
        color: #333333;
      }
    }
    .todo-box {
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      background-color: #ffffff;
      border: 1px solid #DCDFE6;
      border-bottom: none;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
      p {
        padding: 10px;
        font-size: 16px;
      }
    }
    #home .task-line {
      cursor: pointer;
      &.active{
        background-color: #F5F7FA;
        color: #409EFF;  // 选中字体背景跟着改变
      }
    }
    .chart-box {
      width: 100%;
      background-color: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      border-radius: 4px;
      margin-top: 15px;
      p {
        padding: 10px 15px;
        font-size: 16px;
      }
    }
    .chart-box2 {
      width: 100%;
      margin-top: 15px;
      margin-bottom: 15px;
      .chart-box2-item {
        background-color: #ffffff;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border-radius: 4px;
        p {
          padding: 10px 15px;
          font-size: 16px;
        }
      }
      .chart-box2-card {
        height: 439px;
        .list {
          padding: 9px 15px;
          p {
            font-size: 14px;
          }
        }
      }
    }
  }
</style>
<style lang="less">
  #home {
    height: 165px;
    p {
      padding: 4px 5px;
      font-size: 13px;
    }
  }
  #home .el-tabs__content {
    padding: 5px;
    overflow: auto;
    height: 116px;
  }
  #home-scroll {
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
      border-radius: 10px;
    }
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
      background-color: rgba(0,0,0,0.1);
    }
  }
</style>